<!-- #layout name=default -->
<div id="main" class="fixed">
    <div class="page-header">
        <!-- ko if: isNewScript -->
        <h1 class="title pull-left" data-bind="text: Kooboo.text.common.KScript + ': ', visible: isNewScript"></h1>
        <button data-bind="visible: isNewScript, click: formatCode" type="button" class="btn btn-default pull-right">Format code</button>
        <div class="col-md-3" data-bind="visible: isNewScript">
            <div class="row form-group">
                <div class="input-group" data-bind="error: name">
                    <input data-bind="value: name" type="text" placeholder="Name" class="form-control">
                    <span class="input-group-addon">.js</span>
                </div>
            </div>
        </div>
        <!-- /ko -->
        <!-- ko ifnot: isNewScript -->
        <h1 class="title pull-left">KScript<span>:</span>
            <strong data-bind="text: name, attr:{ title: name }"></strong>
        </h1>
        <button data-bind="visible: scriptContent, click: formatCode" type="button" class="btn btn-default pull-right">Format code</button>
        <!-- /ko -->
    </div>
    <div class="block-fullpage with-buttons">
        <div class="block-visual-editor default">
            <div class="kb-editor">
                <textarea data-bind="codeMirror: {
                    mode: 'javascript',
                    value: scriptContent,
                    theme: 'mdn-like'
                }"></textarea>
            </div>
            <div class="kb-panel">
                <iframe src="/_Admin/Development/KScript/Documentation" frameborder="0" style="width: 410px;height: 100%;"></iframe>
            </div>
        </div>
    </div>
    <div class="page-buttons">
        <div class="btn-group dropup">
            <button data-bind="click: onSaveAndReturn" class="btn green" style="margin:0;">Save &amp; Return</button>
            <a class="btn green dropdown-toggle" data-toggle="dropdown" style="margin:0;min-width:auto;"><i class="fa fa-angle-up"></i></a>
            <ul class="dropdown-menu" role="menu">
                <li><a data-bind="click: onSave" href="javascript:;">Save</a></li>
            </ul>
        </div>
        <a data-bind="click: userCancel" class="btn gray">Cancel</a>
    </div>
</div>

<script>
    (function() {
        Kooboo.loadJS([
            "/_Admin/Scripts/kooboo/Guid.js",
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.js",
            "/_Admin/Scripts/lib/codemirror/mode/javascript/javascript.js",
            "/_Admin/Scripts/lib/js-beautify/lib/beautify.js",
            "/_Admin/Scripts/kobindings.codemirror.js"
        ]);
        Kooboo.loadCSS([
            "/_Admin/Scripts/lib/codemirror/lib/codemirror.css",
            "/_Admin/Scripts/lib/codemirror/lib/mdn-like.css"
        ])
    })()
</script>
<script src="/_Admin/View/Development/KScript.js"></script>